<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./CSS/index.css">
  <!-- 原生AJAX发送网络请求 -->
  <!-- <script>
    window.addEventListener('load', function () {
      const articles = document.getElementsByClassName('content');
      const xhr = new XMLHttpRequest();
      xhr.open('GET', './JSON/index.json');
      xhr.send();
      xhr.onreadystatechange = function () {
        const h4 = document.querySelectorAll('.content h4')
        const p = document.querySelectorAll('.content p')
        const span = document.querySelectorAll('.content span')
        const img = document.querySelectorAll('.content img')
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            let res = JSON.parse(xhr.response)
            res = res.data.articleList[0]
            for (let i = 0; i < articles.length; i++) {
              h4[i].innerHTML = res.h4
              p[i].innerHTML = res.p
              span[i].innerHTML = res.span
              img[i].setAttribute('src', res.img)
            }
          }
        }
      }
    })
  </script> -->

  <!-- 使用axios发送网络请求 -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    window.addEventListener('load', function () {
      axios({
        method: "GET",
        url: "http://127.0.0.1:5500/JSON/index.json"
      }).then(res => {
        res = res.data.data
        let articleList = res.articleList[0]
        console.log(articleList);
        const articles = document.getElementsByClassName('content');
        const h4 = document.querySelectorAll('.content h4')
        const p = document.querySelectorAll('.content p')
        const span = document.querySelectorAll('.content span')
        const img = document.querySelectorAll('.content img')
        for (let i = 0; i < articles.length; i++) {
          h4[i].innerHTML = articleList.h4
          p[i].innerHTML = articleList.p
          span[i].innerHTML = articleList.span
          img[i].setAttribute('src', articleList.img)
        }
      })
    })
  </script>
</head>

<body>
  <div class="header">
    <img class="logo" src="./images/logo.svg" alt="">
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">沸点</a></li>
      <li><a href="#">课程</a></li>
      <li><a href="#">直播</a></li>
      <li><a href="#">咨询</a></li>
      <li><a href="#">活动</a></li>
      <li><a href="#">开放社区</a></li>
      <li class="item">
        <a href="#">
          商城
          <span class="new">NEW</span>
        </a>
      </li>
      <li><a href="#">APP</a></li>
      <li><a href="#">插件</a></li>
      <li><a href="#">
          <img src="./images/header-pic1.image" alt="">
        </a></li>
    </ul>

    <span>
      <input type="text" class="search" placeholder="探索稀土掘金">
      <div class="search-icon-container"><img src="./images/icon-search.svg" alt=""></>
    </span>

    <div class="creator">
      <a href="#">
        创作者中心
      </a>
    </div>

    <div class="user">
    </div>

  </div>
  <div class="nav">
    <ul>
      <li><a href="#">综合</a></li>
      <li><a href="#">关注</a></li>
      <li><a href="#">后端</a></li>
      <li><a href="#">前端</a></li>
      <li><a href="#">Android</a></li>
      <li><a href="#">IOS</a></li>
      <li><a href="#">人工智能</a></li>
      <li><a href="#">开发工具</a></li>
      <li><a href="#">代码人生</a></li>
      <li><a href="#">阅读</a></li>
    </ul>

    <div class="manage">
      <a href="#">标签管理</a>
    </div>
  </div>

  <div class="main">
    <div class="main-left">
      <div class="header">
        <span class="active">最新</span>
        <span>推荐</span>
        <span>热榜</span>
      </div>
      <div class="content">
        <h4></h4>
        <p></p>
        <span>
        </span>
        <img alt="">
      </div>
      <div class="content">
        <h4></h4>
        <p></p>
        <span>
        </span>
        <img alt="">
      </div>
      <div class="content">
        <h4></h4>
        <p></p>
        <span>
        </span>
        <img alt="">
      </div>
      <div class="content">
        <h4></h4>
        <p></p>
        <span>
        </span>
        <img alt="">
      </div>
      <div class="content">
        <h4></h4>
        <p></p>
        <span>
        </span>
        <img alt="">
      </div>
      <div class="content">
        <h4></h4>
        <p></p>
        <span>
        </span>
        <img alt="">
      </div>
      <div class="content">
        <h4></h4>
        <p></p>
        <span>
        </span>
        <img alt="">
      </div>
    </div>
    <div class="main-right">
      <div class="mian-right-header">
        <img src="./images/sign-in.png" alt="">
      </div>
      <img src="./images/mian-right.webp" alt="">
      <img src="./images/mian-right.webp" alt="">
      <img src="./images/mian-right.webp" alt="">
      <img src="./images/mian-right.webp" alt="">
    </div>
  </div>
</body>

</html>